<!DOCTYPE html>
<html lang="cn" translate="no">
<head>
    <meta charset="UTF-8" />
    <meta name="google" content="notranslate">
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电子厂</title>
    <style>
        .btns {
            padding: 10px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 1;
            pointer-events: none;
        }

        .btns div {
            margin: 4px 0px;
        }

        .btns button {
            pointer-events: all;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <div class="btns">
        <button id="add" onclick="add_glb()">添加glb模型</button>
    </div>
    <script type="module" crossorigin src="/dist/index.js"></script>
    <script>

        const addBtn = document.getElementById("add");

        function add_glb() {

            if (addBtn) {
                addBtn.innerText = "加载中";
            }

            const input = document.createElement("input");
            input.style.display = "none";
            input.type = "file";
            input.multiple = false;
            input.accept = ".glb";
            input.onchange = async (e) => {
                const file = e.target.files[0];
                if (file) {
                    const blob = window.URL.createObjectURL(file);
                    await editor3D.add_glb(blob);
                    if (addBtn) {
                        addBtn.innerText = "添加glb模型";
                    }
                }
            }
            input.oncancel = () => {
                if (addBtn) {
                    addBtn.innerText = "添加glb模型";
                }
            }
            document.body.append(input);
            input.click();
            setTimeout(() => {
                input.remove();
            }, 100);
        }

    </script>
</body>
</html>